<template>
  <el-descriptions title="基本信息" :column="1">
    <el-descriptions-item label="昵称">{{userInfo.nickname}}</el-descriptions-item>
    <el-descriptions-item label="账号">{{userInfo.username}}</el-descriptions-item>
    <el-descriptions-item label="电话">{{userInfo.phone}}</el-descriptions-item>
    <el-descriptions-item label="性别">{{userInfo.sex | filterSex}}</el-descriptions-item>
    <el-descriptions-item label="角色">{{ userInfo.belongRole | filterBlongRole }} </el-descriptions-item>
    <el-descriptions-item label="当前时间">{{ timeNow }}</el-descriptions-item>
  </el-descriptions>
</template>

<script>
import dayjs from "dayjs";
export default {
  name: "home",
  data() {
    return {
      timeNow: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    };
  },
  filters: {
    filterSex(val) {
      if (!val) return "未知";
      return val === 1 ? "男" : "女";
    },
    filterBlongRole(val) {
      if (!val || !val.length) return "暂无角色";
      return val.map((c) => c.name).join("、");
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo || {};
    },
  },
  methods: {
    getTime() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.timeNow = dayjs().format("YYYY-MM-DD HH:mm:ss");
        this.getTime();
      }, 1000);
    },
  },
  mounted() {
    this.getTime();
  },
  beforeDestroy () {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }
};
</script>

<style>
</style>